<template>
  <page-view class="check-order">
    <page-header title="确认订单" :show-back="true"></page-header>
    <div class="content-box">
      <div class="address">
        <div v-if="address.length == 0">
          <router-link to="/address" class="shoose">去添加收获地址</router-link>
        </div>
        <div v-else>
          <div class="big">{{ chooseAddress.address }}</div>
          <div class="small">
            {{ chooseAddress.person_name }} {{ chooseAddress.phone }}
          </div>
          <router-link to="/address" class="change">选择收获地址</router-link>
        </div>
      </div>
      <div class="goods">
        <van-card
          v-for="item in cartList"
          :key="item.id"
          :num="item.count"
          :price="item.price"
          :desc="item.food_desc"
          :title="item.food_name"
          :thumb="item.food_img[0]"
        />
      </div>
      <div class="pay-footer">
        <button @click="pay">确认付款 ￥{{ totalMoney }}</button>
      </div>
    </div>
  </page-view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import Api from "../utils/api";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
const route = useRoute();
const router = useRouter();
const store = useStore();
const cartList = reactive(JSON.parse(route.query.goods));
const totalMoney = ref(route.query.totalMoney);
const address = reactive([]);

const getAddress = async () => {
  if (store.state.addressInfo === null) {
    let results = await Api.addressInfo.findByUid();
    console.log(results);
    store.commit("setAddressInfo", results);
    results.forEach((item) => {
      address.push(item);
    });
  } else {
    store.state.addressInfo.forEach((item) => {
      address.push(item);
    });
  }
};
getAddress();

// 1.去仓库中去currentAddresss
// 2.到address数组中查询是否有默认地址
// 3.取address数组中的第一个单元
let chooseAddress = computed(() => {
  if (store.state.currentAddresss) return store.state.currentAddresss;
  else {
    if (address.length > 0) {
      let info = address.filter((item) => item.isDefault == 1);
      if (info.length == 0) {
        store.commit("setCurrentAddress", address[0]);
        return address[0];
      } else {
        store.commit("setCurrentAddress", info[0]);
        return info[0];
      }
    }
  }
});

// 确认并生成订单，且跳转到订单页
const pay = async () => {
  if (store.state.currentAddresss === null) {
    Toast("您还没有选择收获地址，请填写");
  } else {
    let results = await Api.orderInfo.add({
      aid: store.state.currentAddresss.id,
      foodList: cartList,
    });
    router.push({ name: "order" });
  }
};
</script>

<style lang="scss" scoped>
.check-order {
  .content-box {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .address {
      > div {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .big {
          font-size: 18px;
          line-height: 30px;
        }
        .change {
          width: 100px;
          color: blue;
          margin-left: 60%;
        }
      }
    }
    .goods {
      flex: 1;
      overflow: auto;
    }
    .pay-footer {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        border: none;
        background-color: skyblue;
        height: 60px;
        width: fit-content;
        padding: 0px 10px;
        font-size: 18px;
        color: white;
        border-radius: 10px;
      }
    }
  }
}
</style>